import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'

import PropTypes from 'prop-types'

import classnames from 'classnames'

import XDivider from '../../components/XDivider'

import { image_prefix } from '../../utils'

import './index.scss'

type GoodsPrizes = {
  id: number,
  title: string,
  cover: string
}

interface IProps {
  queryRow: {
    status: number,
    type: number,
    number: number,
    GoodsPrizes: GoodsPrizes[]
  }, 
  onClick: () => {}
}


export default class extends Component<IProps, {}> {

  render() {

    const { queryRow, onClick } = this.props

    return (
      <View
        className={classnames('card', { 'card-vertical': queryRow.status === 1, 'card-horizontal': queryRow.status === 0 })}
        onClick={onClick}
      >
        {
          queryRow.status === 0
            ?
            <View style={{ backgroundImage: 'url(' + image_prefix + queryRow.GoodsPrizes[0].cover + ')' }} className="testImg" />
            :
            queryRow.status === 1
              ?
              <Image src={image_prefix + queryRow.GoodsPrizes[0].cover} className='image' mode='widthFix' />
              :
              null
        }
        <View className={classnames('inner', { 'inner-vertical': queryRow.status === 1, 'inner-horizontal': queryRow.status === 0 })}>
          <View className='title'>
            {
              queryRow.GoodsPrizes.map(cell => (
                <View className='paragraph' key={cell.id}>
                  <Text className='text'>{cell.title}</Text>
                  {/* <Text className='price'>￥245</Text> */}
                </View>
              ))
            }
          </View>
          <View className='brief'>
            <View className='caption'>
              <Text className='icon'>{queryRow.status === 0 ? '进行中' : queryRow.status === 1 ? '已结束' : ''}</Text>
              <XDivider />
              <Text className='text'>{queryRow.style === 0 ? `${queryRow.endAt} 自动开奖` : queryRow.type === 1 ? `参与人数满 ${queryRow.number} 人自动开奖` : null}</Text>
            </View>
            {/*
              queryRow.status === 0 && <Text className='text'>共1人参加</Text>
            */}
          </View>
        </View>
      </View>
    )
  }

  static propTypes = {
    queryRow: PropTypes.object,
    onClick: PropTypes.func
  }

  static defaultProps = {
    queryRow: {},
    onClick: () => { }
  }
}